<template>
    <div>
            <div v-for="item in ctitle" :key="item">
            <h3 class="ctitle">{{item}}</h3>
           <van-row type="flex" justify="space-around">
               
                <van-col span="6" v-for="(item,i) in Clist" :key="i" >
                    <div class="rows">
                        
                        <div @click="todo(i)">
                            <img :src="item.cimg" alt="">
                            <p>{{item.ctext}}</p>
                        </div>
                    </div>
                </van-col>
                
            </van-row>
            </div>
          
    </div>
</template>

<script>
    export default {
        name:'Classify',
        data() {
            return {
            ctitle:['孕期','产后','婴儿期','幼儿期'],
            Clist:[
                {
                    "cimg":'https://img.yzcdn.cn/vant/cat.jpeg',
                    "ctext":'孕早期'
                },
                  {
                    "cimg":'https://img.yzcdn.cn/vant/cat.jpeg',
                    "ctext":'孕早期'
                },
                  {
                    "cimg":'https://img.yzcdn.cn/vant/cat.jpeg',
                    "ctext":'孕早期'
                }
            ]
            }
        },
        methods: {
            todo(index){
                this.$router.push('/firsterTrimester?id='+parseInt(index+1))
            }
        },
    }
</script>

<style scoped>
    .ctitle{
        width: 100%;
        height: 27px;
        line-height: 27px;
        margin-top: 20px;
        font-size: 14px;
        font-weight: normal;
        color: #999
    }
    .rows{
        height:105px;
        text-align: center
    }
    .rows img{
        width: 70px;
        height: 70px;
        display: block;
        border-radius: 10px
    }
    .rows div p{
        color: #bbb;
        font-size: 12px;
        line-height: 24px
    }
</style>